<template>
  <div>
    <div class="flex justify-end">
      <el-date-picker
        style="width: 90px"
        v-model="year"
        type="year"
        placeholder="请选择年份"
        value-format="YYYY"
        :clearable="false"
      />
    </div>
    <div
      ref="chartsRef"
      v-loading="loading"
      style="width: 100%; height: 230px"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { onUnmounted, ref, watchEffect } from 'vue'
import * as echarts from 'echarts'
import useFetch from '@/hooks/useFetch'
import { queryDeptMatterCardRecordData } from '@/api/home'
import { cloneDeep } from 'lodash-es'
import useUserStore from '@/stores/user'

const userStore = useUserStore()

const chartsRef = ref<HTMLDivElement>(null)

const defaultFillArr = new Array(12).fill(0)

const props = withDefaults(
  defineProps<{
    unitId?: number
  }>(),
  {
    unitId: 0,
  },
)

const year = ref(String(new Date().getFullYear()))

const defaultSeries = [
  {
    data: defaultFillArr,
    type: 'bar',
    barWidth: 26,
    stack: 'b',
    name: '黄牌数',
    itemStyle: {
      color: '#E37318',
    },
  },
  {
    data: defaultFillArr,
    type: 'bar',
    barWidth: 26,
    stack: 'b',
    name: '红牌数',
    itemStyle: {
      color: '#D54941',
    },
  },
]

const options = ref({
  grid: {
    top: '15%',
    left: '5%',
    right: 0,
    bottom: '10%',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  legend: {
    show: true,
  },
  xAxis: {
    type: 'category',
    data: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ],
  },
  yAxis: [
    {
      type: 'value',
      name: '发牌数(张)',
    },
    {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#999',
      },
    },
  ],
  dataZoom: [
    {
      type: 'inside',
    },
  ],
  series: defaultSeries,
})

const charts = ref(null)

const { loading, execute, onFetchSuccess } = useFetch(
  queryDeptMatterCardRecordData,
)

onFetchSuccess((data) => {
  if (data?.length) {
    const newYears = data
    const newYearRedCards = newYears.map((item) => item.redCardNum ?? 0)
    const newYearYellowCards = newYears.map((item) => item.yellowCardNum ?? 0)

    const newSeries = cloneDeep(defaultSeries)
    newSeries[0].data = newYearRedCards
    newSeries[1].data = newYearYellowCards
    options.value.series = newSeries
  }
  initCharts()
})

watchEffect(async () => {
  const unitId = props?.unitId ? props.unitId : userStore?.unitId || 0
  await execute({
    unitId,
    year: year.value,
  })
})

const initCharts = () => {
  if (charts.value) {
    charts.value.dispose()
  }
  if (chartsRef?.value) {
    const chart = echarts.init(chartsRef.value)
    chart.setOption(options.value)
    charts.value = chart
    // 窗口变化自适应
    window.addEventListener('resize', handleResize)
  }
}

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  charts.value = null
})

const handleResize = () => {
  charts.value?.resize()
}
</script>
